<template>
  <div class="container">
    <!-- 导航栏 开始 -->
    <uni-search-bar ref="searchBar" :bgColor="bgColor" :focus="isFocus" :placeholder="placeholder" :cancelButton="cancelButton" :value="value" @confirm="search" @blur="blur" @focus="focus" @input="input" @cancel="cancel" @clear="clear" :radius="radius" />
    <!-- 导航栏 结束-->
  </div>
</template>

<script>
export default {
  props: {
    placeholder: {
      type: [String, null],
      default: '搜索售点',
    },
    cancelButton: {
      type: [Boolean, null],
      default: true,
    },
    value: {
      type: [String, Number, null],
      default: '',
    },
    bgColor: {
      type: String,
      default: '#EEEEEE',
    },
    radius: {
      type: Number,
      default: 10,
    },
    isFocus: {
      type: Boolean,
      default: true,
    },
  },
  watch: {
    placeholder(n) {
      console.log(n)
    },
  },
  data() {
    return { searchValue: '' }
  },
  mounted() {
    this.$refs.searchBar.blur()
  },
  methods: {
    search({ value }) {
      this.$emit('update:value', value)
      uni.showToast({
        title: '搜索：' + value,
        icon: 'none',
      })
    },
    input(value) {
      this.$emit('input', value)
    },
    clear(res) {
      // uni.showToast({
      //   title: 'clear事件，清除值为：' + res.value,
      //   icon: 'none',
      // })
    },
    blur(res) {
      // uni.showToast({
      //   title: 'blur事件，输入值为：' + res.value,
      //   icon: 'none',
      // })
    },
    focus(e) {
      // uni.showToast({
      //   title: 'focus事件，输出值为：' + e.value,
      //   icon: 'none',
      // })
    },
    cancel(res) {
      // uni.showToast({
      //   title: '点击取消，输入值为：' + res.value,
      //   icon: 'none',
      // })
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 100rpx;
}
::v-deep.uni-searchbar__box {
  height: 70rpx !important;

}
</style>
